<template>
  <div class="ad-form">
    <el-form size="mini" inline label-position="right" label-width="auto" ref="form" :model="form">
      <div class="ad-block">
        <el-row :gutter="10">
          <el-col :span="8">
            <el-form-item label="区划代码：" prop="code" :rules="[{required: true, message: '请输入'}]">
              <el-input :disabled="$attrs.mode == 'edit'" v-model="form.code"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="名称：" prop="name" :rules="[{required: true, message: '请输入'}]">
              <el-input v-model="form.name"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="是否县级市：" prop="hasCounty" :rules="[{required: true, message: '请选择'}]">
              <ad-status-select v-model="form.hasCounty" :dict="dict.is_county" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="8">
            <el-form-item label="所属省份：" prop="provinceCode" :rules="[{required: true, message: '请选择'}]">
              <ad-select v-model="form.provinceCode" :options="provinceData"
                         :config="{optionKey: 'name', optionValue: 'code'}"
                         @change="clearCity"
                         @select="province => form.provinceName = province.name"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="所属城市：" prop="cityCode" :rules="[{required: canSelectCity, message: '请选择'}]">
              <ad-select  v-model="form.cityCode" :options="cityData"
                          :config="{optionKey: 'name', optionValue: 'code'}"
                          @select="city => form.cityName = city.name"
                          @focus="getCityData(form.provinceCode)"
                          :disabled="!canSelectCity"/>
            </el-form-item>
          </el-col>
        </el-row>
      </div>
      <div class="op">
        <el-button type="primary" :loading="saving" @click="save">保存</el-button>
        <el-button type="primary" plain @click="cancel">取消</el-button>
      </div>
    </el-form>
  </div>
</template>

<script>
import AdSelect from '@/components/AdSelect'
import AdStatusSelect from '@/components/AdStatusSelect'
import adForm from '@/mixins/adForm'
import { get, add, edit } from '@/api/region/city'
import { get as getProvinceData } from '@/api/region/provinceData'
import { get as getCityData } from '@/api/region/cityData'

class Form {
  code = ''
  name = ''
  hasCounty = ''
  provinceCode = ''
  cityCode = ''
}

export default {
  components: { AdSelect, AdStatusSelect },
  mixins: [adForm({get, add, edit})],
  dicts: ['is_county'],
  data() {
    return {
      provinceData: [],
      cityData: [],
      form: new Form(),
    }
  },
  created() {
    getProvinceData().then(res => {
      this.provinceData = res.data
    })
  },
  computed: {
    canSelectCity() {
      return this.form.hasCounty && this.form.hasCounty !== '0' && this.form.provinceCode
    }
  },
  watch: {
    // 'form.hasCounty'(yes) {
    //   if (!yes) {
    //     this.clearCity()
    //   }
    // },
    // 'form.provinceCode'() {
    //   this.clearCity()
    // }
  },
  methods: {
    clearCity() {
      this.form.cityCode = ''
      this.form.cityName = ''
    },
    afterGetDetail(res) {
      if (this.$attrs.mode == 'edit') {
        this.getCityData(res.data.provinceCode)
      }
    },
    getCityData(code) {
      getCityData(code).then(res => {
        this.cityData = res.data
      })
    }
  }
}
</script>

<style lang="scss" scoped>
</style>